<template>
  <div id="container" ref="chart" style="width: 600px;height: 600px"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'TodayProductYLELD',
  data() {
    return {
      description: '今日生产合格率',
      chart: null
    }
  },
  created() {},
  methods: {
    handleResize() {
      // 使用nextTick确保DOM已经更新完毕
      this.$nextTick(() => {
        if (this.chart) {
          // 调用resize方法
          this.chart.resize()
          console.log(this.chart)
        }
      })
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption({
        title: {
          text: '今日生产统计'
        },
        tooltip: {},
        legend: {},
        grid: {
          left: 'left',
          width: 'auto',
          containLabel: true
        },
        series: [
          {
            name: '产量',
            type: 'pie',
            data: [
              {
                value: 58,
                name: '合格率'
              },
              {
                value: 42,
                name: '不合格率'
              }
            ]
          }
        ]
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  }
}
// let myChart = echarts.init(document.getElementById('container'));
//
// window.addEventListener('resize', function () {
//   if (myChart != null) {
//     myChart.resize()
//   }
// })
</script>

<style scoped></style>
